<template>
  <div class="checkbox">
    <fx-card title="基础用法">
      <fx-checkbox v-model="baseCheckbox">备选项</fx-checkbox>
      <p>当前选择: {{ baseCheckbox }}</p>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用状态">
      <fx-checkbox v-model="disabledCheckbox1" disabled>备选项</fx-checkbox>
      <fx-checkbox v-model="disabledCheckbox2" disabled>备选项</fx-checkbox>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="多选框组">
      <fx-checkbox-group v-model="checkboxGroup">
        <fx-checkbox label="备选项 A"></fx-checkbox>
        <fx-checkbox label="备选项 B" disabled></fx-checkbox>
        <fx-checkbox label="备选项 C"></fx-checkbox>
        <fx-checkbox label="备选项 D"></fx-checkbox>
        <fx-checkbox label="备选项 E"></fx-checkbox>
      </fx-checkbox-group>
      <br>
      {{ checkboxGroup }}
      <template #hide>
        <pre v-highlight="checkboxGroups"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="全选">
      <fx-row>
        <fx-col>
          <fx-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="checkAllChange">全选</fx-checkbox>
        </fx-col>
      </fx-row>
      <fx-row>
        <fx-col>
          <fx-checkbox-group v-model="checkboxAll" @change="checkChange">
            <fx-checkbox label="备选项 A"></fx-checkbox>
            <fx-checkbox label="备选项 B"></fx-checkbox>
            <fx-checkbox label="备选项 C"></fx-checkbox>
            <fx-checkbox label="备选项 D"></fx-checkbox>
            <fx-checkbox label="备选项 E"></fx-checkbox>
          </fx-checkbox-group>
        </fx-col>
      </fx-row>
      <fx-row>
        <fx-col>
          {{ checkboxAll }}
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="all"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="数量限制 min=1 max=3">
      <fx-checkbox-group v-model="numberCheckbox" :min="1" :max="3">
        <fx-checkbox label="备选项 A"></fx-checkbox>
        <fx-checkbox label="备选项 B"></fx-checkbox>
        <fx-checkbox label="备选项 C"></fx-checkbox>
        <fx-checkbox label="备选项 D"></fx-checkbox>
        <fx-checkbox label="备选项 E"></fx-checkbox>
      </fx-checkbox-group>
      <br>
      {{ numberCheckbox }}
      <template #hide>
        <pre v-highlight="number"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="传入对象">
      <fx-checkbox-group v-model="objectCheckbox" value-key="id">
        <fx-checkbox v-for="item in objectCheckboxList" :key="item.id" :label="item">
          {{ item.label }}
        </fx-checkbox>
      </fx-checkbox-group>
      <br>
      {{ objectCheckbox }}
      <template #hide>
        <pre v-highlight="object"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="按钮样式">
      <ul class="list">
        <li>
          <fx-checkbox-group v-model="buttonCheckbox" size="large">
            <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
            <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
          </fx-checkbox-group>
        </li>
        <li>
          <fx-checkbox-group v-model="buttonCheckbox" size="middle">
            <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
            <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
          </fx-checkbox-group>
        </li>
        <li>
          <fx-checkbox-group v-model="buttonCheckbox" size="default">
            <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
            <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
          </fx-checkbox-group>
        </li>
        <li>
          <fx-checkbox-group v-model="buttonCheckbox" size="mini">
            <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
            <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
            <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
          </fx-checkbox-group>
        </li>
      </ul>
      {{ buttonCheckbox }}
      <template #hide>
        <pre v-highlight="button"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API checkbox 属性">
      <fx-table :data="checkboxApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API checkboxGroup 属性">
      <fx-table :data="checkboxGroupApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API checkboxGroup 方法">
      <fx-table :data="checkboxGroupMethod">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="callback" label="回调参数"></fx-table-item>
      </fx-table>
    </fx-card>
    <fx-card title="API checkboxButton 属性">
      <fx-table :data="checkboxButtonApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const checkboxApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'Number | String | Object | Boolean' },
  { name: 'label', directions: 'Checkbox 的 value', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'indeterminate', directions: '设置 indeterminate 状态，只负责样式控制', type: 'Boolean', default: 'false' }
]
const checkboxGroupApi = [
  { name: 'modelValue / v-model', directions: '绑定值', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'size', directions: '大小尺寸（仅在border下作用）', type: 'Boolean', default: 'false' },
  { name: 'valueKey', directions: '对象属性时，指定唯一绑定值key', type: 'String' },
  { name: 'max', directions: '最大选择个数', type: 'Number' },
  { name: 'min', directions: '最小选择个数', type: 'Number' }
]
const checkboxGroupMethod = [
  { name: 'change', directions: '绑定值变化时触发的事件', callback: '当前选中Checkbox值' }
]
const checkboxButtonApi = [
  { name: 'label', directions: 'Checkbox 的 value', type: 'Number | String | Object | Boolean' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' }
]

const checkAll = ref<boolean>(false)
const checkboxAll = ref<string[]>([])
const indeterminate = ref<boolean>(false)
const checkChange = (val: string[]) => {
  checkAll.value = val.length === 5
  indeterminate.value = val.length > 0 && val.length < 5
}
const checkAllChange = (val: boolean) => {
  checkboxAll.value = val ? ['备选项 A', '备选项 B', '备选项 C', '备选项 D', '备选项 E'] : []
  indeterminate.value = false
}

const baseCheckbox = ref<boolean>(true)
const disabledCheckbox1 = ref<boolean>(true)
const disabledCheckbox2 = ref<boolean>(false)
const checkboxGroup = reactive<string[]>(['备选项 B'])
const numberCheckbox = reactive<string[]>(['备选项 B'])
const buttonCheckbox = reactive<string[]>(['备选项 A'])

const objectCheckbox = reactive([{
  id: '1',
  label: '备选项 A'
}])
const objectCheckboxList = [
  {
    id: '1',
    label: '备选项 A'
  },
  {
    id: '2',
    label: '备选项 B'
  },
  {
    id: '3',
    label: '备选项 C'
  },
  {
    id: '4',
    label: '备选项 D'
  }
]

const base = `<fx-checkbox v-model="baseCheckbox">备选项</fx-checkbox>
{{ baseCheckbox }}`
const disabled = `<fx-checkbox v-model="disabledCheckbox1" disabled>备选项</fx-checkbox>
<fx-checkbox v-model="disabledCheckbox2" disabled>备选项</fx-checkbox>`
const checkboxGroups = `<fx-checkbox-group v-model="checkboxGroup">
  <fx-checkbox label="备选项 A"></fx-checkbox>
  <fx-checkbox label="备选项 B" disabled></fx-checkbox>
  <fx-checkbox label="备选项 C"></fx-checkbox>
  <fx-checkbox label="备选项 D"></fx-checkbox>
  <fx-checkbox label="备选项 E"></fx-checkbox>
</fx-checkbox-group>
{{ checkboxGroup }}`
const number = `<fx-checkbox-group v-model="numberCheckbox" :min="1" :max="3">
  <fx-checkbox label="备选项 A"></fx-checkbox>
  <fx-checkbox label="备选项 B" disabled></fx-checkbox>
  <fx-checkbox label="备选项 C"></fx-checkbox>
  <fx-checkbox label="备选项 D"></fx-checkbox>
  <fx-checkbox label="备选项 E"></fx-checkbox>
</fx-checkbox-group>
{{ numberCheckbox }}`
const object = `<fx-checkbox-group v-model="objectCheckbox" value-key="id">
  <fx-checkbox v-for="item in objectCheckboxList" :key="item.id" :label="item">
    {{ item.label }}
  </fx-checkbox>
</fx-checkbox-group>
<br>
{{ objectCheckbox }}
export default defineComponent({
    setup() {
      const objectCheckboxList = [
        {
          id: '1',
          label: '备选项 A'
        },
        {
          id: '2',
          label: '备选项 B'
        },
        {
          id: '3',
          label: '备选项 C'
        },
        {
          id: '4',
          label: '备选项 D'
        }
      ]
    }
})`
const button = `<ul class="list">
  <li>
    <fx-checkbox-group v-model="buttonCheckbox" size="large">
      <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
      <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
    </fx-checkbox-group>
  </li>
  <li>
    <fx-checkbox-group v-model="buttonCheckbox" size="middle">
      <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
      <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
    </fx-checkbox-group>
  </li>
  <li>
    <fx-checkbox-group v-model="buttonCheckbox" size="default">
      <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
      <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
    </fx-checkbox-group>
  </li>
  <li>
    <fx-checkbox-group v-model="buttonCheckbox" size="mini">
      <fx-checkbox-button label="备选项 A"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 B"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 C" disabled></fx-checkbox-button>
      <fx-checkbox-button label="备选项 D"></fx-checkbox-button>
      <fx-checkbox-button label="备选项 E"></fx-checkbox-button>
    </fx-checkbox-group>
  </li>
</ul>
{{ buttonCheckbox }}`
const all = `<fx-row>
  <fx-col>
    <fx-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="checkAllChange">全选</fx-checkbox>
  </fx-col>
</fx-row>
<fx-row>
  <fx-col>
    <fx-checkbox-group v-model="checkboxAll" @change="checkChange">
      <fx-checkbox label="备选项 A"></fx-checkbox>
      <fx-checkbox label="备选项 B"></fx-checkbox>
      <fx-checkbox label="备选项 C"></fx-checkbox>
      <fx-checkbox label="备选项 D"></fx-checkbox>
      <fx-checkbox label="备选项 E"></fx-checkbox>
    </fx-checkbox-group>
  </fx-col>
</fx-row>
<fx-row>
  <fx-col>
    {{ checkboxAll }}
  </fx-col>
</fx-row>
export default defineComponent({
    setup() {
      const checkAll = ref<boolean>(false)
      const checkboxAll = ref<string[]>([])
      const indeterminate = ref<boolean>(false)
      const checkChange = (val: string[]) => {
        checkAll.value = val.length === 5
        indeterminate.value = val.length > 0 && val.length < 5
      }
      const checkAllChange = (val: boolean) => {
        checkboxAll.value = val ? ['备选项 A', '备选项 B', '备选项 C', '备选项 D', '备选项 E'] : []
        indeterminate.value = false
      }
    }
})`
</script>

<style scoped lang="scss">
.checkbox {
  .list {
    > li {
      margin-bottom: 10px;
    }
  }
}
</style>
